<template>
  <div class="bridge">
    <el-card class="box-card right">
      <div class="flexBetween">
        <div class="flex">
          <!-- <el-select
            v-model="regionCode"
            placeholder="请选择省"
            size="small"
            @change="changeRegion(regionCode)"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
          <el-select
            v-model="cityCode"
            placeholder="请选择市"
            size="small"
            class="paddingLeft"
            @change="changeCity(cityCode)"
            clearable
          >
            <el-option
              v-for="item in cityOptions"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
          <el-select
            v-model="areaCode"
            placeholder="请选择区"
            size="small"
            class="paddingLeft"
            clearable
          >
            <el-option
              v-for="item in areaOptions"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select> -->
          <el-input
            placeholder="请输入桥组名称"
            v-model.trim="groupName"
            size="small"
            class="paddingLeft"
            style="width:200px;"
            clearable
          ></el-input>
          <el-button
            type="primary"
            size="small"
            class="paddingLeft"
            style="font-weight: 900;"
            @click="queryBridgeGroup(1)"
          >查询</el-button>
        </div>
        <div>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addDialogEquipment"
          >新增桥组</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"
        class="tableTop"
        stripe
        max-height="600"
        size="small"
        @expand-change="expand"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.children" stripe size="small">
              <el-table-column label="桥梁名称" prop="name" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tooltip content="桥梁详情">
                    <el-button type="text" @click="detail(scope.row)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="桥梁编码" prop="code" show-overflow-tooltip></el-table-column>
              <el-table-column label="桥梁类型" prop="bridgeTypeName" show-overflow-tooltip></el-table-column>
              <el-table-column label="桥梁全长(m)" prop="length" show-overflow-tooltip></el-table-column>
              <el-table-column label="缩略图" prop="area" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-image
                    style="width: 50px; height: 50px;margin-top:10px;"
                    :src="download + scope.row.realisticPictureList[0].path"
                    :preview-src-list="[download + scope.row.realisticPictureList[0].path]"
                    v-if="scope.row.realisticPictureList.length > 0"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column label="区域" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>
                    {{scope.row.provinceName}}
                    <span
                      v-if="scope.row.municipalityName && scope.row.municipalityName !== ''"
                    >/{{scope.row.municipalityName}}</span>
                    <span
                      v-if="scope.row.regionName && scope.row.regionName !== ''"
                    >/{{scope.row.regionName}}</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="备注" prop="desc" show-overflow-tooltip></el-table-column>
              <el-table-column label="是否启用" prop="status" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.status === 1? '启用' : scope.row.status === 0 ? '停用' : ''}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-tooltip content="设备管理">
                    <el-button type="text" @click="toEquip(scope.row)">
                      <img
                        src="../../assets/images/pages/setting.png"
                        style="width:14px;height:14px;"
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="模型管理">
                    <el-button type="text" @click="model(scope.row)">
                      <img
                        src="../../assets/images/pages/model.png"
                        style="width:14px;height:14px;"
                      />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="修改">
                    <el-button type="text" icon="el-icon-edit-outline" @click="edit(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除">
                    <el-button
                      type="text"
                      icon="el-icon-delete"
                      style="color:red !important"
                      @click="removeBridge(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="groupName" show-overflow-tooltip></el-table-column>
        <el-table-column label="编码" prop="code" show-overflow-tooltip></el-table-column>
        <el-table-column label="区域" prop="area" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>
              {{scope.row.provinceName}}
              <span
                v-if="scope.row.municipalityName && scope.row.municipalityName !== ''"
              >/{{scope.row.municipalityName}}</span>
              <span
                v-if="scope.row.regionName && scope.row.regionName !== ''"
              >/{{scope.row.regionName}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-tooltip content="新增桥梁">
              <el-button type="text" icon="el-icon-plus" @click="addEquipment(scope.row.id)"></el-button>
            </el-tooltip>
            <el-tooltip content="修改">
              <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除">
              <el-button
                type="text"
                icon="el-icon-delete"
                style="color:red !important"
                @click="deleteGroup(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :page-count="pageNum"
          @current-change="changeCurrent"
        ></el-pagination>
      </div>
    </el-card>
    <!--  新增桥组 -->
    <vx-popup
      :title="groupTitle"
      width="410px"
      @close="pontinecancel"
      :active.sync="addVisible"
      @confirmPopup="pontineAdd"
      @cancelPopup="pontinecancel"
    >
      <el-form
        :model="addForm"
        :rules="addRules"
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="桥组名称:" prop="groupName">
          <el-input v-model.trim="addForm.groupName" size="small" clearable placeholder="请输入桥组名称"></el-input>
        </el-form-item>
        <el-form-item label="桥组编号:" prop="code">
          <el-input v-model.trim="addForm.code" size="small" clearable placeholder="请输入桥组编号"></el-input>
        </el-form-item>
        <el-form-item label="所属省:" prop="provinceCode">
          <el-select
            v-model="addForm.provinceCode"
            placeholder="请选择省"
            size="small"
            @change="changeAddRegion(addForm.provinceCode)"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属市:" prop="municipalityCode">
          <el-select
            v-model="addForm.municipalityCode"
            placeholder="请选择市"
            size="small"
            class="paddingLeft"
            @change="changeAddCity(addForm.municipalityCode)"
            clearable
          >
            <el-option
              v-for="item in addCityOptions"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属区:" prop="regionCode">
          <el-select
            v-model="addForm.regionCode"
            placeholder="请选择区"
            size="small"
            class="paddingLeft"
            @change="changeArea(addForm.regionCode)"
            clearable
          >
            <el-option
              v-for="item in addAreaOptions"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </vx-popup>
    <!--  新增桥组 -->
    <el-dialog title="保存成功" :visible.sync="saveVisible" width="680px">
      <p>保存成功，是否进行下一步？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBridge">取 消</el-button>
        <el-button type="primary" @click="savedDalogVisible">新建桥梁</el-button>
      </span>
    </el-dialog>
    <!-- 新增桥梁 -->
    <vx-popup
      :title="addtitle"
      width="900px"
      @close="cancelFormSubmit"
      :active.sync="dialogVisible"
      @confirmPopup="submit"
      @cancelPopup="cancelFormSubmit"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="桥梁名称:" prop="name">
              <el-input v-model.trim="ruleForm.name" size="small" clearable placeholder="请输入桥梁名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁编码:" prop="code">
              <el-input v-model.trim="ruleForm.code" size="small" clearable placeholder="请输入桥梁编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁全长:" prop="length">
              <el-input v-model.trim="ruleForm.length" size="small" clearable placeholder="请输入桥梁全长"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="桥梁规范:" prop="standardId">
              <el-select
                v-model="ruleForm.standardId"
                placeholder="请选择桥梁规范"
                size="small"
                @change="changeStandardId"
                clearable
              >
                <el-option
                  v-for="(item,index) in standardList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁类型:" prop="bridgeTypeId">
              <el-select
                v-model="ruleForm.bridgeTypeId"
                placeholder="请选择桥梁类型"
                size="small"
                @change="changeType"
                clearable
              >
                <el-option
                  v-for="(item,index) in bridgeList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁种类:" prop="bridgeKindId">
              <el-select
                v-model="ruleForm.bridgeKindId"
                placeholder="请选择桥梁种类"
                size="small"
                @change="changeKind"
                clearable
              >
                <el-option
                  v-for="(item,index) in kindList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="养护类别:" prop="maintenanceType">
              <el-select
                v-model="ruleForm.maintenanceType"
                placeholder="请选择养护类别"
                size="small"
                @change="changeMaintenanceType"
                clearable
              >
                <el-option
                  v-for="(item,index) in mainList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="养护级别:" prop="maintenanceLevel">
              <el-select v-model="ruleForm.maintenanceLevel" placeholder="请选择养护级别" size="small" clearable>
                <el-option
                  v-for="(item,index) in typeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运行状态:" prop="status">
              <el-radio-group v-model="ruleForm.status" size="small">
                <el-radio :label="0">停用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="所属省:" prop="provinceCode">
              <el-select
                v-model="ruleForm.provinceCode"
                placeholder="请选择省"
                size="small"
                @change="changeRuleRegion(ruleForm.provinceCode)"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.regionCode"
                  :label="item.regionName"
                  :value="item.regionCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属市:" prop="municipalityCode">
              <el-select
                v-model="ruleForm.municipalityCode"
                placeholder="请选择市"
                size="small"
                @change="changeRuleCity(ruleForm.municipalityCode)"
                clearable
              >
                <el-option
                  v-for="item in ruleCityOptions"
                  :key="item.regionCode"
                  :label="item.regionName"
                  :value="item.regionCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区:" prop="regionCode">
              <el-select
                v-model="ruleForm.regionCode"
                placeholder="请选择区"
                size="small"
                @change="changeRuleArea(ruleForm.regionCode)"
                clearable
              >
                <el-option
                  v-for="item in ruleAreaOptions"
                  :key="item.regionCode"
                  :label="item.regionName"
                  :value="item.regionCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="桥梁位置:">
              <div v-if="addtitle === '新增桥梁'">

              <div class="map_box" id="map">
                <el-input
                v-model.trim="address"
                id="suggestId"
                name="ruleForm.address"
                size="small"
                class="item"
                placeholder="请输入关键字"
              ></el-input>
              </div>
              </div>
              <div v-else style="width:360px;">
                  <div class="map_box" id="mapContaion">
                <el-input
                v-model.trim="address"
                id="suggestId"
                name="ruleForm.address"
                size="small"
                class="item"
                placeholder="请输入关键字"
              ></el-input>
              </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="桥梁简介:" prop="desc">
          <el-input
            type="textarea"
            v-model.trim="ruleForm.desc"
            maxlength="500"
            show-word-limit
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="桥梁图片:">
          <el-upload
            :action="upload"
            list-type="picture-card"
            :on-remove="removeRender"
            :on-success="handleSuccessRender"
            :file-list="imgList"
            :limit="1"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </vx-popup>
  </div>
</template>
<script>
// 滚动条
import VuePerfectScrollbar from "vue-perfect-scrollbar";
import { deepClone } from "@/util.js";
import base from "../../api/base";
export default {
  data() {
    return {
      upload: base.UPLOADURL,
      download: base.DOWNLOADURL,
      imgList: [],
      address:'',
      addtitle: "新增桥梁",
      groupTitle: "新增桥组",
      addVisible: false, //桥组显示隐藏
      saveVisible: false, //保存弹框
      dialogVisible: false,
      mapContent: false,
      options: [],
      cityOptions: [],
      areaOptions: [],
      addCityOptions: [],
      addAreaOptions: [],
      ruleCityOptions: [],
      ruleAreaOptions: [],
      groupName: "",
      regionCode: "",
      cityCode: "",
      areaCode: "",
      pageNum: 1,
      pageSize: 10,
      loading: true,
      index: false,
      tableData: [],
      total: 0,
      addForm: {
        groupName: "",
        code: "",
        regionCode: "",
        municipalityCode: "",
        provinceCode: "",
        regionName: "",
        municipalityName: "",
        provinceName: ""
      },
      addRules: {
        groupName: [
          { required: true, message: "请输入桥组名称", trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入桥组编号", trigger: "blur" }],
        provinceCode: [
          { required: true, message: "请选择所属省", trigger: "change" }
        ],
        municipalityCode: [
          { required: true, message: "请选择所属市", trigger: "change" }
        ],
        regionCode: [
          { required: true, message: "请选择所属区", trigger: "change" }
        ]
      },
      add: false,
      bridgeList: [],
      standardList: [
        {
          label: "城市桥梁规范",
          value: "0"
        },
        {
          label: "公路桥梁规范",
          value: "1"
        }
      ],
      kindList: [
        {
          label: "立交桥",
          value: "0"
        },
        {
          label: "跨江跨河桥",
          value: "1"
        }
      ],
      mainList: [
        {
          label: "Ⅰ类养护",
          value: "0"
        },
        {
          label: "Ⅱ类养护",
          value: "1"
        },
        {
          label: "Ⅲ类养护",
          value: "2"
        },
        {
          label: "Ⅳ类养护",
          value: "3"
        },
        {
          label: "Ⅴ类养护",
          value: "4"
        }
      ],
      typeList: [
        {
          value: "0",
          label: "Ⅰ"
        },
        {
          value: "1",
          label: "Ⅱ"
        },
        {
          value: "2",
          label: "Ⅲ"
        }
      ],
      ruleForm: {
        name: "",
        code: "",
        bridgeTypeId: "",
        bridgeTypeName: "",
        bridgeKindId: "",
        bridgeKindName: "",
        length: "",
        lat: "",
        lng: "",
        status: 1,
        desc: "",
        maintenanceType: "",
        maintenanceLevel: "",
        regionCode: "",
        municipalityCode: "",
        provinceCode: "",
        regionName: "",
        municipalityName: "",
        provinceName: "",
        standardId: "",
        standardName: "",
        realisticPictureList: []
      },
      rules: {
        name: [{ required: true, message: "请输入桥梁名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入桥梁编码", trigger: "blur" }],
        length: [
          { required: true, message: "请输入桥梁长度", trigger: "blur" }
        ],
        desc: [{ required: true, message: "请输入桥梁简介", trigger: "blur" }],
        standardId: [
          { required: true, message: "请选择桥梁规范", trigger: "change" }
        ],
        bridgeTypeId: [
          { required: true, message: "请选择桥梁类型", trigger: "change" }
        ],
        bridgeKindId: [
          { required: true, message: "请选择桥梁种类", trigger: "change" }
        ],
        provinceCode: [
          { required: true, message: "请选择所属省", trigger: "change" }
        ],
        municipalityCode: [
          { required: true, message: "请选择所属市", trigger: "change" }
        ],
        maintenanceType: [
          { required: true, message: "请选择养护类别", trigger: "change" }
        ],
        maintenanceLevel: [
          { required: true, message: "请选择养护级别", trigger: "change" }
        ],
        regionCode: [
          { required: true, message: "请选择所属区", trigger: "change" }
        ],
        status: [
          { required: true, message: "请选择运行状态", trigger: "change" }
        ]
      },
      groupId: ""
    };
  },
  created() {
    this.getArea(100000, data => {
      this.options = data;
    });
    this.queryBridgeGroup(1);
  },
  components: {
    VuePerfectScrollbar
  },
  methods: {
    //跳转到设备
    toEquip(row){
      this.$router.push({path:'/bridgeInformation/equipmentManagement',query: {id:row.id}})
    },
    //省市查询
    getArea(id, callback) {
      this.$api.bridge.queryBridgeRegion({ parentId: id }).then(res => {
        if (res.data.success) {
          return callback(res.data.data);
        }
      });
    },
    //搜索框省
    changeRegion(val) {
      this.cityOptions = [];
      this.cityCode = "";
      this.areaOptions = [];
      this.areaCode = "";
      this.getArea(val, data => {
        this.cityOptions = data;
      });
    },
    //搜索框市
    changeCity(val) {
      this.areaOptions = [];
      this.areaCode = "";
      this.getArea(val, data => {
        this.areaOptions = data;
      });
    },
    changeAddRegion(val) {
      this.addAreaOptions = [];
      this.addForm.regionCode = "";
      this.addForm.regionName = "";
      this.addCityOptions = [];
      this.addForm.municipalityCode = "";
      this.addForm.municipalityName = "";
      this.getArea(val, data => {
        this.addCityOptions = data;
      });
      this.options.map(v => {
        if (v.regionCode === val) {
          this.addForm.provinceName = v.regionName;
        }
      });
    },
    changeAddCity(val) {
      this.addAreaOptions = [];
      this.addForm.regionCode = "";
      this.addForm.regionName = "";
      this.getArea(val, data => {
        this.addAreaOptions = data;
      });
      this.addCityOptions.map(v => {
        if (v.regionCode === val) {
          this.addForm.municipalityName = v.regionName;
        }
      });
    },
    changeArea(val) {
      this.addAreaOptions.map(v => {
        if (v.regionCode === val) {
          this.addForm.regionName = v.regionName;
        }
      });
    },
    changeRuleRegion(val) {
      this.ruleAreaOptions = [];
      this.ruleForm.regionCode = "";
      this.ruleForm.regionName = "";
      this.ruleCityOptions = [];
      this.ruleForm.municipalityCode = "";
      this.ruleForm.municipalityName = "";
      this.getArea(val, data => {
        this.ruleCityOptions = data;
      });
      this.options.map(v => {
        if (v.regionCode === val) {
          this.ruleForm.provinceName = v.regionName;
        }
      });
    },
    changeRuleCity(val) {
      this.ruleAreaOptions = [];
      this.ruleForm.regionCode = "";
      this.ruleForm.regionName = "";
      this.getArea(val, data => {
        this.ruleAreaOptions = data;
      });
      this.ruleCityOptions.map(v => {
        if (v.regionCode === val) {
          this.ruleForm.municipalityName = v.regionName;
        }
      });
    },
    changeRuleArea(val) {
      this.ruleAreaOptions.map(v => {
        if (v.regionCode === val) {
          this.ruleForm.regionName = v.regionName;
        }
      });
    },
    //桥梁规范
    changeStandardId(val) {
      this.ruleForm.bridgeTypeId = "";
      this.queryBridgeTypeList(val);
      this.standardList.map(v => {
        if (v.value === val) {
          this.ruleForm.standardName = v.label;
        }
      });
    },
    changeType(val) {
      this.bridgeList.map(v => {
        if (v.id === val) {
          this.ruleForm.bridgeTypeName = v.name;
        }
      });
    },
    changeKind(val) {
      this.kindList.map(v => {
        if (v.value === val) {
          this.ruleForm.bridgeKindName = v.label;
        }
      })
    },
    //养护类型
    changeMaintenanceType(val) {
      this.ruleForm.maintenanceLevel = ""
    },
    //桥梁类型
    queryBridgeTypeList(id) {
      this.$api.bridge.queryBridgeTypeList({ standardId: id }).then(res => {
        if (res.data.success) {
          this.bridgeList = res.data.data[0];
        }
      })
    },
    //桥组查询
    queryBridgeGroup(val) {
      if (val) {
        this.pageNum = 1
      }
      let data = {
        provinceCode: this.regionCode,
        municipalityCode: this.cityCode,
        regionCode: this.areaCode,
        groupName: this.groupName,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      this.$api.bridge.queryBridgeGroup(data).then(res => {
        if (res.data.success) {
          let _obj = deepClone(res.data.data.instanceList);
          _obj.forEach((item, index) => {
            item.children = [];
          });
          this.tableData = deepClone(_obj);
          this.total = res.data.data.instanceList.length;
          this.loading = false;
        }
      })
    },
    changeCurrent(val) {
      this.pageNum = val
      this.queryBridgeGroup()
    },
    resetGroup() {
      this.addForm = {
        groupName: "",
        code: "",
        regionCode: "",
        municipalityCode: "",
        provinceCode: "",
        regionName: "",
        municipalityName: "",
        provinceName: ""
      }
    },
    // 新增桥组
    addDialogEquipment() {
      this.groupTitle = "新增桥组"
      this.$refs["addForm"].resetFields()
      this.addVisible = true
      this.cityOptions = []
      this.areaOptions = []
    },
    // 桥组修改弹框
    handelEdit(val) {
      this.groupTitle = "修改桥组";
      if (val.municipalityCode && val.municipalityCode !== "") {
        this.changeAddRegion(val.provinceCode);
      }
      if (val.regionCode && val.regionCode !== "") {
        this.changeAddCity(val.municipalityCode);
        this.changeArea(val.regionCode);
      }
      this.addForm = JSON.parse(JSON.stringify(val))
      this.addVisible = true
    },
    //删除桥组
    deleteGroup(val) {
      this.$confirm("此操作将删除桥组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.bridge.deleteBridgeGroupById({ id: val }).then(res => {
            if (res.data.success) {
              this.$vs.notify({
                text: "删除成功",
                color: "success"
              });
              this.queryBridgeGroup();
            }
          });
        })
        .catch(() => {});
    },
    // 取消桥组
    pontinecancel() {
      this.addVisible = false;
      this.resetGroup();
    },
    // 桥组确认
    pontineAdd() {
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          if (this.groupTitle === "新增桥组") {
            this.$api.bridge.addBridgeGroup(this.addForm).then(res => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "新增桥组成功",
                  color: "success"
                });
                this.addVisible = false;
                this.resetGroup();
                this.queryBridgeGroup()
              }
            });
          } else {
            let data = {
              id: this.addForm.id,
              groupName: this.addForm.groupName,
              code: this.addForm.code,
              regionCode: this.addForm.regionCode,
              municipalityCode: this.addForm.municipalityCode,
              provinceCode: this.addForm.provinceCode,
              regionName: this.addForm.regionName,
              municipalityName: this.addForm.municipalityName,
              provinceName: this.addForm.provinceName,
              cache: this.addForm.cache,
              dp: this.addForm.dp,
              type: this.addForm.type,
              deleted: this.addForm.deleted,
              assembly: this.addForm.assembly
            };
            this.$api.bridge.updateBridgeGroupById(data).then(res => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "修改桥组成功",
                  color: "success"
                });
                this.addVisible = false;
                this.resetGroup();
                this.queryBridgeGroup();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 桥梁详情
    detail(val) {
      let  facadeFolderId = ''
      if(val.facadeFolderId){
        facadeFolderId = val.facadeFolderId
      }
      let realisticPictureFolderId = ''
      if(val.realisticPictureFolderId){
        realisticPictureFolderId = val.realisticPictureFolderId
      }
      this.$router.push({
        path: "/bridgeInformation/bridgeDetail",
        query: { desc: val.desc, id: val.id,realisticPictureFolderId: realisticPictureFolderId,facadeFolderId:facadeFolderId}
      });
    },
    //表格展开
    expand(row, index) {
      this.index = !this.index;
      this.queryBridgeBasicByParentId(row.id);
    },
    //获取桥梁
    queryBridgeBasicByParentId(id) {
      this.$api.bridge.queryBridgeBasicByParentId({ groupId: id }).then(res => {
        if (res.data.success) {
          this.tableData.forEach((item, index) => {
            if (id === item.id) item.children = res.data.data[0];
          });
        }
      });
    },
    handleSuccessRender(res, file) {
      this.ruleForm.realisticPictureList.push({
        path: res.data.successFiles[0].filePath,
        id: res.data.successFiles[0].id
      });
    },
    removeRender() {
      this.ruleForm.realisticPictureList = [];
    },
    // 新增弹框
    addEquipment(val) {
      this.addtitle = "新增桥梁";
      this.$refs["ruleForm"].resetFields();
      this.imgList = [];
      this.$nextTick(function() {
        var th = this
        var	marker = new AMap.Marker();
        var map = new AMap.Map('map');
        map.setZoom(15);
        map.on('click',function(e){
          // console.log(e)
          // console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
          var lng = e.lnglat.getLng()
          var lat = e.lnglat.getLat()
          initMarker(lng,lat)
        })
        //建立一个自动完成的对象
        map.plugin('AMap.Autocomplete',function(){//回调函数
          var autoOptions = {
            city: "", //城市，默认全国
            input:"suggestId"//使用联想输入的input的id
          };
          var autocomplete= new AMap.Autocomplete(autoOptions);
          // console.log(autocomplete)
          AMap.event.addListener(autocomplete, "select", function(data){
          var lng = data.poi.location.lng;   //获取经度
          var lat = data.poi.location.lat;   //获取纬度
          initMarker(lng,lat)
          });
        });
        function initMarker(lng,lat) {
          //搜索下一个之前把前一个标注给去掉
          if(marker!=null&&marker!=''){
              marker.setMap(null);
          }
          //重新自动标注
          marker = new AMap.Marker({
            position: [lng,lat],
            // title: data.poi.district+"["+data.poi.name+"]",
            map: map,
            draggable:true,
            raiseOnDrag:true,
          });
          map.setCenter([lng,lat])
          th.ruleForm.lng = lng
          th.ruleForm.lat = lat
        }
      });
      this.dialogVisible = true;
      this.groupId = val;
    },
    //编辑桥梁
    edit(val) {
      this.addtitle = "修改桥梁";
      this.changeStandardId(val.standardId)
      if (val.municipalityCode && val.municipalityCode !== "") {
        this.changeRuleRegion(val.provinceCode);
      }
      if (val.regionCode && val.regionCode !== "") {
        this.changeRuleCity(val.municipalityCode);
        this.changeRuleArea(val.regionCode);
      }
      let imageUrl = this.download + val.realisticPictureList[0].path;
      let obj = {
        name: "111.png",
        url: imageUrl
      };
      this.imgList = [obj];
      this.ruleForm = JSON.parse(JSON.stringify(val))
      this.$nextTick(function() {
        var th = this
        var	marker = new AMap.Marker();
        var map = new AMap.Map('mapContaion');
        map.setZoom(15);
        initMarker(th.ruleForm.lng,th.ruleForm.lat)
        map.on('click',function(e){
          // console.log(e)
          // console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
          var lng = e.lnglat.getLng()
          var lat = e.lnglat.getLat()
          initMarker(lng,lat)
        })
        //建立一个自动完成的对象
        map.plugin('AMap.Autocomplete',function(){//回调函数
          var autoOptions = {
            city: "", //城市，默认全国
            input:"suggestId"//使用联想输入的input的id
          };
          var autocomplete= new AMap.Autocomplete(autoOptions);
          // console.log(autocomplete)
          AMap.event.addListener(autocomplete, "select", function(data){
          var lng = data.poi.location.lng;   //获取经度
          var lat = data.poi.location.lat;   //获取纬度
          initMarker(lng,lat)
          });
        });
        function initMarker(lng,lat) {
          //搜索下一个之前把前一个标注给去掉
          if(marker!=null&&marker!=''){
            marker.setMap(null);
          }
          //重新自动标注
          marker = new AMap.Marker({
            position: [lng,lat],
            // title: data.poi.district+"["+data.poi.name+"]",
            map: map,
            draggable:true,
            raiseOnDrag:true,
          });
          map.setCenter([lng,lat])
          th.ruleForm.lng = lng
          th.ruleForm.lat = lat
        }
      });
      this.dialogVisible = true;
    },
    //删除桥梁
    removeBridge(val) {
      this.$confirm("此操作将删除桥梁, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.bridge.removeBridgeBasicById({ id: val.id }).then(res => {
            if (res.data.success) {
              this.$vs.notify({
                text: "删除成功",
                color: "success"
              });
              this.queryBridgeBasicByParentId(val.groupId);
            }
          });
        })
        .catch(() => {});
    },
    savedDalogVisible() {
      this.saveVisible = false;
      this.dialogVisible = true;
    },
    cancelBridge() {
      this.saveVisible = false
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    resetBridge() {
      this.ruleForm = {
        name: "",
        code: "",
        bridgeTypeId: "",
        bridgeTypeName: "",
        bridgeKindId: "",
        bridgeKindName: "",
        length: "",
        lat: "",
        lng: "",
        status: 1,
        desc: "",
        maintenanceType: "",
        maintenanceLevel: "",
        regionCode: "",
        municipalityCode: "",
        provinceCode: "",
        regionName: "",
        municipalityName: "",
        provinceName: "",
        standardId: "",
        standardName: "",
        realisticPictureList: []
      };
    },
    cancelFormSubmit() {
      this.dialogVisible = false;
      this.resetBridge();
    },
    //桥梁新增
    submit() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          if(this.ruleForm.lng !== '') {
            if (this.ruleForm.realisticPictureList.length > 0) {
              if (this.addtitle === "新增桥梁") {
                this.$api.bridge
                  .addBridgeBasic({ ...this.ruleForm, groupId: this.groupId })
                  .then(res => {
                    if (res.data.success) {
                      this.$vs.notify({
                        text: "新增桥梁成功",
                        color: "success"
                      });
                      this.dialogVisible = false;
                      this.resetBridge()
                      this.queryBridgeBasicByParentId(this.groupId);
                    }
                  });
              } else {
                let data = {
                  name: this.ruleForm.name,
                  code: this.ruleForm.code,
                  bridgeTypeId: this.ruleForm.bridgeTypeId,
                  bridgeTypeName: this.ruleForm.bridgeTypeName,
                  bridgeKindId: this.ruleForm.bridgeKindId,
                  bridgeKindName: this.ruleForm.bridgeKindName,
                  length: this.ruleForm.length,
                  lat: this.ruleForm.lat,
                  lng: this.ruleForm.lng,
                  status: this.ruleForm.status,
                  desc: this.ruleForm.desc,
                  maintenanceType: this.ruleForm.maintenanceType,
                  maintenanceLevel: this.ruleForm.maintenanceLevel,
                  regionCode: this.ruleForm.regionCode,
                  municipalityCode: this.ruleForm.municipalityCode,
                  provinceCode: this.ruleForm.provinceCode,
                  regionName: this.ruleForm.regionName,
                  municipalityName: this.ruleForm.municipalityName,
                  provinceName: this.ruleForm.provinceName,
                  standardId: this.ruleForm.standardId,
                  standardName: this.ruleForm.standardName,
                  realisticPictureList: this.ruleForm.realisticPictureList,
                  id: this.ruleForm.id,
                  groupId: this.ruleForm.groupId,
                  bimFolderId: this.ruleForm.bimFolderId,
                  diseaseFolderId: this.ruleForm.diseaseFolderId,
                  maintenanceFolderId: this.ruleForm.maintenanceFolderId,
                  facadeFolderId: this.ruleForm.facadeFolderId,
                  realisticPictureFolderId: this.ruleForm.realisticPictureFolderId
                };
                this.$api.bridge.updateBridgeBasic(data).then(res => {
                  if (res.data.success) {
                    this.$vs.notify({
                      text: "修改桥梁成功",
                      color: "success"
                    });
                    this.dialogVisible = false;
                    this.queryBridgeBasicByParentId(this.ruleForm.groupId)
                    this.resetBridge()
                  }
                });
              }
            } else {
              this.$vs.notify({
                text: "请上传桥梁图片",
                color: "danger"
              });
            }
          } else {
            this.$vs.notify({
              text: "请选择桥梁位置",
              color: "danger"
            });
          }
        }
      });
    },
    model(val) {
      this.$router.push({
        path: "/bridgeInformation/modelManagement",
        query: { id: val.id, detail:val }
      });
    }
  }
};
</script>
<style lang="scss">
.amap-sug-result {
  z-index: 999999;
}
</style>
<style scoped lang="scss">
/deep/.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
}
/deep/.el-table__row {
  height: 30px;
}
.cell {
  max-height: 34px !important;
}
.bridge {
  width: 100%;
  height: 86vh;
  display: flex;
  justify-content: space-between;
  position: relative;
  .right {
    width: 100%;
    height: 100%;
    .flexBetween {
      display: flex;
      justify-content: space-between;
      .paddingLeft {
        margin-left: 20px;
      }
    }
    .tableTop {
      margin-top: 20px;
      height: calc(60% - 10px);
    }
    .page {
      position: absolute;
      left:45%;
      bottom:40px;
    }
  }
}
/deep/.el-dialog__title {
  color: #177dff;
  font-size: 2rem;
  text-align: center;
}
/deep/.el-dialog__header {
  text-align: center;
  padding: 34px 20px 10px;
  margin-top: 36vh;
}
/deep/.el-upload--picture-card {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
}
/deep/.el-upload-list--picture-card .el-upload-list__item {
  width: 60px;
  height: 60px;
}
.map_box {
  width: 640px;
  height: 200px;
  background: gainsboro;
  margin-top: 20px;
  position: relative;
  .item{
    position: absolute;
    z-index:10000;
    width:140px;
    top:10px;
    right:30px;
  }
}
</style>
